import { Component } from 'react'

export default class Event extends Component {
  constructor() {
    super()
    this.state = {
      myName: "大牧"
    }
  }

  handler1 () {
    console.log("事件函数执行了", this)
  }

  handler2 (e, id) {
    console.log("事件对象", e)
    console.log("要删除的数据编号：", id)
  }

  render () {
    return (
      <>
        <h3>事件管理</h3>
        <h5>1、绑定事件</h5>
        <button onClick={this.handler1}>基本绑定方式</button>
        <h5>2、绑定事件-绑定this</h5>
        <button onClick={this.handler1.bind(this)}>绑定this指向</button>
        <h5>3、绑定事件-声明不是实现</h5>
        <p>正确写法：onClick=this.handler1</p>
        <p>错误写法：onClick=this.handler1()</p>
        {/* <button onClick={this.handler1()}>绑定事件函数</button> */}
        <h5>4、传递参数-借助箭头函数</h5>
        <button onClick={() => this.handler2(100)}>删除数据</button>
        <h5>5、传递参数-访问事件对象</h5>
        <button onClick={e => this.handler2(e, 200)}>访问事件对象</button>
      </>
    )
  }
}
